import React from "react";
import TheButton from "../../../components/TheButton";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import Editor from "../component/Editor";
import TheDialog from "../../../components/TheDialog";
import { apiDynamicLabelPage, apiDynamicLabelDel } from '@/request/pet'
import TheImage from '@/components/TheImage'

class Tags extends React.Component {
  state = {
    columns: [
      {
        title: "动态标签",
        dataIndex: "labelName",
        key: "labelName",
      },
      {
        title: "标签图片",
        render: (text, render) => {
          return <TheImage src={render.labelFilez} width={80} height={80} />
        }
      },
      {
        title: "操作",
        render: (text, render) => {
          return (
            <div>
              <TheButton haspermi={['pet:tags:update']} onClick={() => this.onEditor('editor', render)}>修改</TheButton>
              {render.labelStatus === 'Y' && <TheButton haspermi={['pet:tags:state']} onClick={() => this.deleteConfirm(render.labelId, 'N', '停用')}>停用</TheButton>}
              {render.labelStatus === 'N' && <TheButton haspermi={['pet:tags:state']} onClick={() => this.deleteConfirm(render.labelId, 'Y', '启用')}>启用</TheButton>}
            </div>
          );
        },
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    title: "",
    visible: false,
    editorValue: {},
    type: ''
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { pageData: { pageNo, pageSize } } = this.state
    let res = await apiDynamicLabelPage({ pageNo, pageSize })
    if (res.data && res.code === 0) {
      this.setState({
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        dataSource: res.data,
        total: res.totalCount
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  };
  onAdd = (type) => {
    this.setState({ visible: true, title: "新增动态标签", type });
  };
  onEditor = (type, value) => {
    this.setState({ visible: true, title: "修改动态标签", editorValue: value, type });
  };
  deleteConfirm = (labelId, type, text) => {
    React.$confirm({
      title: `您确定${text}此项动态标签吗？`,
      onOk: async () => {
        await apiDynamicLabelDel({ labelId, type })
        React.$message({
          type: 'info',
          content: `${text}成功`
        })
        this.getData()
      },
    });
  };
  handleCancel = () => {
    this.setState({ title: "", visible: false });
  };
  render() {
    const {
      columns,
      dataSource,
      pageData: { pageSize, pageNo },
      total,
      title,
      visible,
      type,
      editorValue
    } = this.state;
    return (
      <div className="p-layout-box">
        <div
          className="p-search-box"
          style={{ display: "flex", justifyContent: "flex-end" }}
        >
          <TheButton haspermi={['pet:tags:add']} type="default" size="middle" onClick={() => this.onAdd('add')}>
            新增标签
          </TheButton>
        </div>
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} scroll={{ x: 'max-content', y: '63vh' }} />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
        <TheDialog
          title={title}
          footer={null}
          handleCancel={this.handleCancel}
          visible={visible}
          width={400}
        >
          <Editor reload={this.getData} type={type} editorValue={editorValue} handleCancel={this.handleCancel} />
        </TheDialog>
      </div>
    );
  }
}

export default Tags;
